import React from 'react';
import styled from 'styled-components';

interface AlertModalProps {
    isOpen: boolean;
    title?: string;
    message: string;
    onClose: () => void;
}

const Overlay = styled.div<{ isOpen: boolean }>`
    display: ${({ isOpen }) => (isOpen ? 'flex' : 'none')};
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
`;

const ModalContainer = styled.div`
    background-color: #ffffff;
    padding: 20px 30px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: fadeIn 0.3s ease-out;

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }
`;

const ModalHeader = styled.div`
    margin-bottom: 15px;
`;

const ModalTitle = styled.h2`
    margin: 0;
    color: #0077b6;
`;

const ModalBody = styled.div`
    margin-bottom: 20px;
    color: #023e8a;
`;

const ModalFooter = styled.div`
    display: flex;
    justify-content: flex-end;
`;

const CloseButton = styled.button`
    background-color: #0077b6;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;

    &:hover {
        background-color: #023e8a;
    }
`;

const AlertModal: React.FC<AlertModalProps> = ({ isOpen, title, message, onClose }) => {
    return (
        <Overlay isOpen={isOpen} onClick={onClose}>
            <ModalContainer onClick={(e) => e.stopPropagation()}>
                {title && (
                    <ModalHeader>
                        <ModalTitle>{title}</ModalTitle>
                    </ModalHeader>
                )}
                <ModalBody>
                    {message}
                </ModalBody>
                <ModalFooter>
                    <CloseButton onClick={onClose}>关闭</CloseButton>
                </ModalFooter>
            </ModalContainer>
        </Overlay>
    );
};

export default AlertModal;
